<template>
  <div class="wrapper">
    <JForm :form-config="dynamicValidateForm" :read="read" @handleBoxEvent="handleBoxEvent" />
  </div>
</template>

<script>
import JForm from '@/components/JForm'
import { getDictListByType } from '@/api/dictionaries'

export default {
  name: 'AreaUpdate',
  components: { JForm },
  props: {
    emitData: {
      type: Object,
      default: () => ({})
    },
    read: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const userInfo = [
      {
        name: 'scopeName',
        label: '权限名称',
        type: 'string',
        required: false,
        placeholder: '数据权限名称'
      },
      {
        name: 'scopeCode',
        label: '权限编号',
        type: 'string',
        required: false,
        placeholder: '权限编号'
      },
      {
        name: 'allRole',
        label: '所有角色执行',
        type: 'option',
        required: false,
        config: {}
      },
      {
        name: 'note',
        label: '备注',
        type: 'string',
        required: false
      },
      {
        name: 'scopeClass',
        label: '数据权限类名',
        type: 'string',
        required: false,
        placeholder: '数据权限类名'
      },
      {
        name: 'scopeColumn',
        label: '数据可见字段',
        type: 'string',
        required: false,
        placeholder: ''
      },
      {
        name: 'scopeField',
        label: '数据权限字段',
        type: 'string',
        required: false
      },
      {
        name: 'scopeType',
        label: '数据权限类型',
        type: 'option',
        required: false,
        config: {}
      },
      {
        name: 'scopeValue',
        label: '数据权限值域',
        type: 'string',
        required: false
      }
    ]
    return {
      userInfo,
      CITY_YN01: [],
      CITY_DATA_SCOPE_TYPE: []
    }
  },
  computed: {
    clientId() {
      const { id = null } = this.client
      return id
    },
    dynamicValidateForm() {
      const data = this.userInfo
      const result = []
      data.forEach(i => {
        const { type } = i
        if (type === 'option') {
          i.config.options = this.filterOption(i)
        }
        if (this.emitData) {
          const { name } = i
          i.value = this.emitData[name]
        }
        result.push(i)
      })
      return result
    },
    allRoleOption() {
      const data = this.CITY_YN01
      data.forEach(item => {
        const { code, name } = item
        item.value = +code
        item.label = name
      })
      return data
    },
    scopeTypeOption() {
      const data = this.CITY_DATA_SCOPE_TYPE
      data.forEach(item => {
        const { code, name } = item
        item.value = +code
        item.label = name
      })
      return data
    }
  },
  watch: {},
  created() {
    this.getDicCITY_YN01()
    this.getDicCITY_DATA_SCOPE_TYPE()
  },
  mounted() {},
  methods: {
    getDicCITY_YN01() {
      getDictListByType({ dictTypeCode: 'YN01' }).then(res => {
        const { code, data /* message */ } = res
        if (code === 200) { this.CITY_YN01 = data }
      })
    },
    getDicCITY_DATA_SCOPE_TYPE() {
      getDictListByType({ dictTypeCode: 'DATA_SCOPE_TYPE' }).then(res => {
        const { code, data /* message */ } = res
        if (code === 200) { this.CITY_DATA_SCOPE_TYPE = data }
      })
    },
    handleBoxEvent(emitObj) {
      this.submitForm(emitObj)
    },
    filterOption(item) {
      const key = item.name
      return this[`${key}Option`]
    },
    submitForm(emitObj) {
      this.$emit('handleBoxEvent', { target: emitObj })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0px;
}
</style>
